<template>
  <a-layout class="container">
    <a-layout-content class="layout-content">

      <a-page-header
          style="border: 1px solid rgb(235, 237, 240)"
          title="设置"
          sub-title="系统相关配置"
      />

      <div style="padding: 10px">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="常规设置">
            <a-form :model="formState" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
              <a-form-item label="网站标题">
                <a-input v-model:value="formState.title"/>
              </a-form-item>
              <a-form-item label="次级标题">
                <a-input v-model:value="formState.subTitle"/>
              </a-form-item>
              <a-form-item label="关键词">
                <a-input v-model:checked="formState.keywords"/>
              </a-form-item>
              <a-form-item label="备案号">
                <a-input v-model:checked="formState.keywords"/>
              </a-form-item>
              <a-form-item label="版权">
                <a-input v-model:checked="formState.copyright"/>
              </a-form-item>
              <a-form-item label="站点描述">
                <a-textarea v-model:value="formState.desc"/>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">修改</a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="显示设置">
            <a-form :model="formState" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
              <a-form-item label="评论审核">
                <a-switch v-model:checked="formState.isOpenComment" checked-children="开" un-checked-children="关" />
              </a-form-item>
              <a-form-item label="评论回复">
                <a-switch v-model:checked="formState.isOpenReplayComment" checked-children="开" un-checked-children="关" />
              </a-form-item>
              <a-form-item label="关键词">
                <a-textarea v-model:value="formState.desc" placeholder="评论过滤关键词，用 | 分割开"/>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">修改</a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="3" tab="通知设置">
            <a-form :model="formState" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
              <a-form-item label="邮件通知">
                <a-switch v-model:checked="formState.isSendEmail" checked-children="开" un-checked-children="关" />  <span class="tips">请在配置文件中修改相关配置</span>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">修改</a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-layout-content>
  </a-layout>

</template>

<script>
import {reactive, ref, toRaw } from 'vue'

export default {
  name: "SettingList",
  components: {},
  setup() {
    const formState = reactive({
      name: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
      isOpenComment:false,
      isOpenReplayComment:false,
      isSendEmail:false,
    });

    const onSubmit = () => {
      console.log('submit!', toRaw(formState));
    };
    return {
      activeKey: ref('1'), formState, onSubmit
    }
  }
}
</script>

<style>
.layout-content{
  padding-top: 20px !important;
}
.tips {
  margin-left: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>